<template>
  <div class="zjb_bao">
      <!-- 跳转立即报名页面布局开始 -->

         <div class="zjb_bao_con">
             <!-- 整体内容布局开始 -->
            <div class="zjb_bao_header">
            <!-- 头部布局开始 -->
           <span> <img @click="zjb_goXiang"  src="" alt=""></span>
            <p>讲师详情</p>
            <!-- 头部布局结束 -->
         </div>
         <div class="zjb_bao_head_bottom">
            <!-- 标签布局开始 -->
            <ul>
                <li >
                    <img :src="bao.avatar" alt="教师图片">
                    <div class="zjb_xiang_right">
                        <div>
                            <p>{{bao.teacher_name}} <span>{{bao.level_name}}</span> </p>
                            <p v-if="bao.sex==0">男<span>{{bao.age}}年教龄</span></p>
                             <p v-if="bao.sex==1">女<span>{{bao.age}}年教龄</span></p>
                            <span v-for="(v,i) in bao.tag_content" :key="i" class="span">
                                {{v}}
                            </span>
                        </div>
                        <p @click="zjb_guan" >查看详情</p>
                        
                    </div>
                </li>
            </ul>
            <!-- 标签布局结束 -->
          </div>
            <div class="zjb_bao_time">
            <!-- 时间布局开始 -->
             <h2>选择时间（北京时间）</h2>
             <ul> 
                 <li v-for="(v,i) in dd" :key="i" class="zjb_li"  :class="{ac:num==i}" :style="{disable:i<week-1?true:false}">
                     
                   <p>{{v}}</p>
                   
                 </li>                
             </ul>
              <ul>
                    <li v-for="(it,k) in da" :key="k" @click="ax(k,it)" :class="{ac:num==k}">
                       <p> {{it.slice(0,2)}}/{{it.slice(3,5)}} </p>
                    </li>
              </ul>
            <!-- 时间布局结束 -->
        </div>

        <div class="zjb_end">
            <ul>
                <li v-for="(v,i) in hours" :key="i" >
                    <p>{{v.start_play|time('hh:mm')}}</p>
                    <p @click="zjb_yu(v)">可预约</p>
                </li>
            </ul>
        </div>

        <p v-show="show" class="zjb_show">您已选择：<span :style="{color:'red'}">{{xuan}}</span>的课程</p>

        <!-- 整体内容布局结束 -->
        </div>

      
        

         <div class="zjb_bao_footer">
            <!-- 尾部布局开始 -->
            <p>立即报名</p>
            <!-- 尾部布局结束 -->
        </div>



      <!-- 跳转立即报名页面布局结束 -->
  </div>
</template>

<script>
import http from '../../http/http'
import {mapState} from 'vuex';
export default {
    name:'Bao',
    filters:{
        time(val,arg){
            if(arg=='hh:mm'){
                var str=new Date(val*1000);
                var tt=str.getHours()+':'+(str.getMinutes()<10?str.getMinutes()+'0':str.getMinutes());
                console.log(tt);
            }
            return tt;
        }
    },
    data(){
        return{
            da:[],
            id:'',
            mouth:'',
            day:'',
            yars:'',
            dayy:'',
            dd:["周一","周二","周三","周四","周五","周六","周日"],
            color:'red',
            brack:'black',
            cc:'gray',
            hours:["20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30"],
            xuan:'',
            show:false,
            bao:{},
            num:0,
            ri:'',
            week:''
        }
    },
    mounted(){//--<最早操作dom元素的生命周期的钩子
        this.id=this.$route.query.id;//--->详情页传递过来的id
        var timer=new Date();//-->获取当前时间
        var timm=timer.toLocaleString();
        var year=timer.getFullYear();//--->当前时间的年
        this.year=year;
        var mount=timer.getMonth()+1;//--->获取当前的月份+1
        var date=timer.getDate();//--->获取当前的月份的日
        var week=timer.getDay();//-->获取当天的周几
        this.week=week;
      //=======================================================================
       var token=this.$store.state.User.token;
       //-->渲染头部讲师页面
       var bao=http('get','https://www.365msmk.com/api/app/teacher/'+this.id+'?',{headers: { Authorization: "Bearer " + token }});
        bao.then(res=>{
            // console.log(res);
            this.bao=res.data.data.teacher;
        })
        //-->渲染时间
        this.axios.post('https://www.365msmk.com/api/app/teacher/invite',{
            is_next: 0,
            teacher_id: this.id,//-->id
            week_day: week//-->周几
        },{headers: { Authorization: "Bearer " + token }}).then(res=>{
            // console.log(res);
            var da=res.data.data.weekDateList;
            this.da=res.data.data.weekDateList;
            this.hours=res.data.data.otoCourseList;
            var a=da[0];//-->12月30日 // console.log(typeof a);
            var b=a.slice(0,2);//-->12 // console.log(b);
            var time=new Date(year,mount,date).getDate();//---》获取当前月的最大的天数或总天数 var time1=new Date(2019,1,0).getDate();
            // console.log(time1)
            if(mount==12){//-->月等于12，外国为12，国内为第二年的1月，所以要减
                m-1;//-->12
                y-1;//-->2019
            };
            var day=a.slice(3,5)-1;//--》日30-1  29
            for(var i=1;i<=14;i++){//-->14天
                day++;
                if(day>time){//-->当day大于当前月的最大的天数的时候
                    day=1;
                    mount+1;
                }
                if(day<date){
                   
                }
                return day;
            }
            //--->这里有点问题
            // this.da=mount+'/'+day;
        })
   
    },
    methods:{
        // ad(k){
        //     this.week=k;
        //     // alert(11)
        // },
        ax(k,it){
             this.num=k;
            // alert(222)
            this.ri=it.slice(0,2)+'.'+it.slice(3,5);//-->点击传入日期
            var token=this.$store.state.User.token;
             this.axios.post('https://www.365msmk.com/api/app/teacher/invite',{
            is_next: 0,
            teacher_id: this.id,//-->id
            week_day:k//-->周几
        },{headers: { Authorization: "Bearer " + token }}).then(res=>{
            // console.log(res)
             this.hours=res.data.data.otoCourseList;
        })

        },
        zjb_goXiang(){
            this.$router.go(-1);//--->点击返回的箭头，返回上一页
        },
        zjb_guan(){//--->点击查看详情，返回上一页
            this.$router.go(-1);
        },
        zjb_yu(v){
           //思路：当点击日期后，再点击可预约，显示，否则直接点击可预约，提示用户去点击日期
           if(this.ri==''){
               this.$toast('请选择日期');
               return false;
           }else{
                this.show=true;
            var a=v.start_play;
            var b=new Date(a*1000);
            var c=b.getHours()+':'+(b.getMinutes()<10?b.getMinutes()+'0':b.getMinutes());
           //-->显示===当前的用户名加当前的年，加点击选择的日期 +时间
           this.xuan=this.bao.teacher_name+' '+this.year+'.'+this.ri+'.'+c;
           }
        }
    },
    computed:{
        ...mapState({
            list:'list'
        })
    }
}
</script>

<style lang="scss" scoped>
.ac{
    color:red;
}
.span{
    width: auto;
    height: .4rem;
    line-height: .4rem;
    border-radius: .16rem;
    background: orange;
    color: red;
    font-size: .14rem;
    text-align: center;
    margin-right: .1rem;
    padding: 0 .1rem;
}
.zjb_bao{
    height: 100%;
    font-size: .16rem;
    line-height: .2rem;
    width: 6.4rem;
    background: rgb(240, 242, 245);;
    display: flex;
    flex-direction: column;
}
.zjb_bao_con{
    flex: 1;
    overflow: auto;
     position: relative;
}
.zjb_bao_header{
    height: 1.7rem;
    background: linear-gradient(180deg,#63b7fe,#4e7de3);
    display: flex;
   &>span{
       display: inline-block;
       width: .6rem;
       height: .75rem;
    //    border: 1px solid #000;
       text-align: center;
       line-height: .9rem;
        &>img{
        height: .27rem;
        width: .15rem;
        // border: 1px solid #000;
        font-size: .4rem;
        
         }
   }
   &>P{
       height: .75rem;
       width: 5.37rem;
    //    border: 1px solid #000;
       font-size: .3rem;
       text-align: center;
       line-height: .75rem;
       color: #fff;
   }

}
.zjb_bao_head_bottom{
    position: absolute;
    top: .7rem;
    left: .16rem;
    width: 6.06rem;
    height: 1.55rem;
    // border: 1px solid #000;
    // margin: 0 auto;
    background: #fff;
    border-radius: .08rem;
    ul{
        width: 5.55rem;
        height: 1.3rem;
        //  border: 1px solid #000;
         margin: 0 auto;
        li{
            height: 100%;
            display: flex;
            align-items: center;
            &>img{
                width: .68rem;
                height: .68rem;
                margin-right: .2rem;
            }
            &>.zjb_xiang_right{
                display: flex;
                
                &>div{
                     width: 3.6rem;
                     height: .56rem;
                    //   border: 1px solid #000;
                      padding: .1rem 0;
                    &>p:nth-child(1){
                        font-size: .25rem;
                        color: #595959;
                        &>span{
                            font-size: .18rem;
                            color:#EA7A2F;
                            margin-left: .1rem;
                        }
                    }
                     &>p:nth-child(2){
                        font-size: .2rem;
                        color: #b7b7b7;
                        margin-top: .2rem;
                        &>span{
                             font-size: .18rem;
                             color: #b7b7b7;
                              margin-left: .08rem;
                        }
                    }
                }
                &>p:nth-child(2){
                    font-size: .25rem;
                    margin-top: .14rem;
                    width: 1.05rem;
                    height: .48rem;
                    //  border: 1px solid #000;
                     text-align: center;
                     line-height: .48rem;
                     background: #ebeefe;
                     font-size: .22rem;
                     color: red;
                     border-radius: .4rem;
                }
                &>p:nth-child(3){
                    margin-top: .24rem;
                    font-size: .25rem;
                    margin-left: .16rem;
                    color: #b7b7b7;
                }
            }
        }
    }
}
.zjb_bao_footer{
    width: 100%;
    height: 1rem;
    background: #eb6100;
    color: #fff;
    font-size: .4rem;
    font-weight: 400;
    text-align: center;
    line-height: 1rem;
}
.zjb_bao_time{
    // margin-top: .8rem;
    width: 6.06rem;
    margin: 0.8rem auto;
    border-radius: .16rem;
    height: auto;
   &>h2{
       height: .4rem;
       border-left: 4px solid red;
       padding-left: .2rem;
       line-height: .4rem;
       margin-bottom: .4rem;
   }
   &>ul{
        width: 5.6rem;
        padding: 0 .2rem;
        height: auto;
        background: #fff;
        margin: 0 auto;
        padding: .2rem .2rem;
        display: flex;
        overflow-x: scroll;
        .zjb_li{
            margin: 0 .1rem;
        //    &>p{
        //         // width: .4rem;
        //         // height: .4rem;
        //         // border: 1px solid #000;
        //    }
        }
        li{
            width: 1rem;
            // height: .4rem;
            // border: 1px solid #000;
            // margin: 0 .22rem;
            font-size: .2rem;
        }
   }
}
.zjb_end{
        width: 6.06rem;
        margin: 0.8rem auto;
        // border-radius: .16rem;
        ul{
            border-radius: .16rem;
            display: flex;
            width: 5.6rem;
            padding: 0 .2rem;
            height: auto;
            background: #fff;
            margin: 0 auto;
            padding: .2rem .2rem;
            flex-wrap:wrap;
            li{
                width: 1rem;
                font-size: .23rem;
                margin:0 .2rem;
                padding-top: .2rem;
                &>p:nth-child(2){
                    margin-top: .3rem;
                    color: red;
                }
            }
        }
}
.zjb_show{
    width: 6.4rem;
    height: .6rem;
    text-align: center;
    line-height: .6rem;
    font-size: .23rem;
    margin-top: 1.6rem;
    margin-top: .8rem;
}
</style>